import React, {memo, useCallback} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableHighlight,
  Dimensions,
  NativeModules,
} from 'react-native';
import Colors from '../../utils/Colors';
import PatIcon from '../base/PatIcon';
import {useNavigation} from '@react-navigation/native';
const windowWidth = Dimensions.get('window').width;
const HEIGHT = NativeModules.StatusBarManager.HEIGHT;
const CategroyTop = () => {
  const count = 11;
  const navigation = useNavigation();
  const goCart = useCallback(() => {
    console.log('去购物车');
    navigation.navigate('about');
  }, [navigation]);
  const goSearch = useCallback(() => {
    console.log('去搜索页');
    navigation.navigate('search-root', {type: 'categroy'});
  }, [navigation]);
  return (
    <View style={style.header}>
      <TouchableHighlight
        activeOpacity={1}
        underlayColor={Colors.white}
        onPress={goSearch}>
        <View style={style.searchBox}>
          <PatIcon name="search2" size={14} color={Colors.patFontGray2} />
          <Text style={style.search}>搜索</Text>
        </View>
      </TouchableHighlight>
      <TouchableHighlight onPress={goCart}>
        <View style={style.cart}>
          <PatIcon name="shopping-bag" size={23} color={Colors.patFontGray} />
          {count > 0 ? <Text style={style.count}>{count}</Text> : null}
        </View>
      </TouchableHighlight>
    </View>
  );
};
const style = StyleSheet.create({
  header: {
    width: '100%',
    paddingTop: HEIGHT,
    display: 'flex',
    backgroundColor: Colors.white,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderBottomColor: 'rgba(0,0,0,0)',
    height: HEIGHT + 34,
    borderColor: '#f40',
    zIndex: 99,
  },
  searchBox: {
    marginTop: 1,
    marginLeft: 10,
    height: 25,
    borderRadius: 17,
    paddingLeft: 10,
    paddingRight: 10,
    backgroundColor: Colors.patBGGray,
    width: windowWidth * 0.8,
    display: 'flex',
    borderColor: '#ddd',
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  search: {
    color: Colors.patFontGray2,
    fontSize: 14,
    marginLeft: 10,
  },
  cart: {
    width: 30,
    height: 25,
    marginRight: 10,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'relative',
  },
  count: {
    position: 'absolute',
    width: 18,
    height: 18,
    fontSize: 12,
    backgroundColor: Colors.patFontRed,
    color: Colors.white,
    borderRadius: 50,
    top: -5,
    right: -5,
    textAlign: 'center',
  },
});
export default memo(CategroyTop);
